<template>
	<el-form ref="formRef" :rules="rules" :model="dynamicValidateForm" label-width="10px" class="demo-dynamic">
		<!--    1属性、生成按钮列-->
		<el-row :gutter="5">
			<el-col :span="4">
				<el-form-item prop="tableName" label-width="0">
					<el-input v-model="dynamicValidateForm.tableName" placeholder="输入数据库表名称" />
				</el-form-item>
			</el-col>
			<el-col :span="4">
				<el-form-item prop="description" label-width="0">
					<el-input v-model="dynamicValidateForm.description" placeholder="输入表注释" />
				</el-form-item>
			</el-col>
			<el-col :span="16">
				<el-button type="primary" @click="addDomain">新增数据表字段</el-button>
				<el-button type="warning" @click="resetForm(formRef)"> 清空数据 </el-button>
				<el-button type="success" @click="dialog = true">查看教程</el-button>
				<el-button type="danger" @click="submitForm(formRef)"> 生成前后端代码 </el-button>
			</el-col>
		</el-row>
		<!--    2头部列区域-->
		<el-row class="form-header" :gutter="10">
			<el-col :span="3">
				<span>数据字段名</span>
			</el-col>
			<el-col :span="3">
				<span>数据类型</span>
			</el-col>
			<el-col :span="3">
				<span>默认值</span>
			</el-col>
			<el-col :span="3">
				<span>字段注释</span>
			</el-col>
			<el-col :span="3">
				<span>表单类型</span>
			</el-col>
			<el-col :span="3">
				<span>关联表单</span>
			</el-col>
			<el-col :span="1">
				<span>必选</span>
			</el-col>
			<el-col :span="1">
				<span>展示</span>
			</el-col>
			<el-col :span="1">
				<span>查询</span>
			</el-col>
			<el-col :span="1">
				<span>操作</span>
			</el-col>
		</el-row>

		<!--    3分条件进行判断渲染展示，例如固定的id为第0个-->
		<el-row v-for="(domain, index) in dynamicValidateForm.domains" :key="index" :gutter="10" class="form-content">
			<!--第二种条件进行判断是id的时候-->

			<!--      1数据字段名-->
			<el-col :span="3">
				<el-form-item
					:key="domain.key"
					:prop="'domains.' + index + '.name'"
					:rules="{
						required: true,
						message: '数据字段名不能为空',
						trigger: 'blur'
					}"
				>
					<el-input v-model="domain.name" placeholder="数据字段名" :disabled="index === 0" />
				</el-form-item>
			</el-col>
			<!--      2数据类型和长度-->
			<el-col :span="3">
				<el-form-item
					:key="domain.key1"
					:prop="'domains.' + index + '.typeAndsize'"
					:rules="{
						required: true,
						message: '数据类型和长度不能为空',
						trigger: 'blur'
					}"
				>
					<el-select v-model="domain.typeAndsize" :disabled="index === 0" placeholder="数据类型和长度">
						<el-option label="varchar(64)" value="varchar(64)"></el-option>
						<el-option label="varchar(255)" value="varchar(255)"></el-option>
						<el-option label="int(1)" value="int(1)"></el-option>
						<el-option label="int(5)" value="int(5)"></el-option>
						<el-option label="int(10)" value="int(10)"></el-option>
						<el-option label="bigint(20)" value="bigint(20)"></el-option>
						<el-option label="double(10,2)" value="double(10,2)"></el-option>
						<el-option label="datetime" value="datetime"></el-option>
						<el-option label="text" value="text"></el-option>
						<el-option label="longtext" value="longtext"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<!--      3默认值-->
			<el-col :span="3">
				<el-form-item :key="domain.key2" :prop="'domains.' + index + '.defaultValue'">
					<el-input v-model="domain.defaultValue" placeholder="请输入默认值" :disabled="index === 0" />
				</el-form-item>
			</el-col>
			<!--      4字段注释-->
			<el-col :span="3">
				<el-form-item
					:key="domain.key3"
					:prop="'domains.' + index + '.description'"
					:rules="{
						required: true,
						message: '字段注释不能为空',
						trigger: 'blur'
					}"
				>
					<el-input v-model="domain.description" placeholder="字段注释" :disabled="index === 0" />
				</el-form-item>
			</el-col>
			<!--      5表单类型-->
			<el-col :span="3">
				<el-form-item
					:key="domain.key4"
					:prop="'domains.' + index + '.formComponent'"
					:rules="{
						required: true,
						message: '表单类型不能为空',
						trigger: 'change'
					}"
				>
					<el-select
						v-if="isChangeCascader"
						v-model="domain.formComponent"
						:disabled="index === 0 || (domain.relevance != null && domain.relevance.length > 0)"
						placeholder="选择表单类型"
					>
						<el-option label="普通表单" value="input"></el-option>
						<el-option label="滑块" value="slider"></el-option>
						<el-option label="评分" value="rate"></el-option>
						<el-option label="计数器" value="number"></el-option>
						<el-option label="电话" value="phone"></el-option>
						<el-option label="邮箱" value="email"></el-option>
						<el-option label="单图片" value="img"></el-option>
						<el-option label="多图片" value="mutileimg"></el-option>
						<el-option label="文件" value="file"></el-option>
						<el-option label="时间选择器" value="time"></el-option>
						<el-option label="日期选择器" value="date"></el-option>
						<el-option label="富文本" value="textarea"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<!--      6关联表信息 -->
			<el-col :span="3">
				<el-form-item :key="domain.key5" :label-width="10" :prop="'domains.' + index + '.relevance'">
					<el-cascader v-model="domain.relevance" :options="options" :props="props" placeholder="选择关联信息" :disabled="index === 0" clearable />
				</el-form-item>
			</el-col>
			<!--      7是否校验-->
			<el-col :span="1">
				<el-form-item
					:key="domain.key6"
					:prop="'domains.' + index + '.isRequire'"
					:rules="{
						required: true,
						message: '是否为必选不能为空',
						trigger: 'change'
					}"
				>
					<el-checkbox v-model="domain.isRequire" :disabled="index === 0" />
				</el-form-item>
			</el-col>
			<!--      8是否展示表单-->
			<el-col :span="1">
				<el-form-item :key="domain.key7" :prop="'domains.' + index + '.isShow'">
					<el-checkbox v-model="domain.isShow" :disabled="index === 0" />
				</el-form-item>
			</el-col>
			<!--    9是否加入查询  -->
			<el-col :span="1">
				<el-form-item :key="domain.key7" :prop="'domains.' + index + '.isShow'">
					<el-checkbox v-model="domain.isSearch" :disabled="index === 0" />
				</el-form-item>
			</el-col>
			<!--     10       操作button-->
			<el-col :span="1">
				<el-popconfirm
					confirm-button-text="确认"
					cancel-button-text="取消"
					:icon="InfoFilled"
					icon-color="#626AEF"
					title="确认删除吗？"
					@confirm="removeDomain(domain)"
				>
					<template #reference>
						<el-button text type="danger" :disabled="index === 0"> 删除 </el-button>
					</template>
				</el-popconfirm>
			</el-col>
		</el-row>
	</el-form>

	<!--  4教程侧边栏页面-->
	<el-drawer v-model="dialog" title="代码生成器手册" direction="rtl" append-to-body="true" size="50%">
		<el-table :data="gridData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
			<el-table-column property="key" label="标题" width="150" />
			<el-table-column property="value" label="内容" />
		</el-table>
	</el-drawer>
</template>

<script setup>
import { nextTick, onBeforeMount, reactive, ref } from 'vue'
import { InfoFilled, View } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
import router from '@/router'

const formRef = ref()
const $route = router
// 定义联级选择器的规则策略
const props = {
	expandTrigger: 'hover'
}
onBeforeMount(async () => {
	if ($route.currentRoute.value.query.id) {
		await load($route.currentRoute.value.query.id)
	}
	await handleGetTables()
})
const options = ref([])
// 初始化方法
const load = async id => {
	const res = await request.get(`/record/${id}`)
	Object.assign(dynamicValidateForm, JSON.parse(res.data.generator))
}
//获取数据表与字段
const handleGetTables = async () => {
	const res = await request.get(`/generator/tables`)
	options.value = res.data
}
const dynamicValidateForm = reactive({
	domains: [
		{
			key: Date.now(),
			key1: Date.now(),
			key2: Date.now(),
			key3: Date.now(),
			key4: Date.now(),
			key5: Date.now(),
			key6: Date.now(),
			key7: Date.now(),
			key8: Date.now(),
			name: 'id',
			typeAndsize: 'bigint(20)',

			description: '序号',
			defaultValue: null,
			formComponent: 'input',
			isRequire: false,
			isShow: false,
			isSearch: false,
			relevance: []
		}
	],
	description: '',
	tableName: ''
})
// 是否展开右侧边栏
const dialog = ref(false)
// 校验规则
const rules = reactive({
	tableName: [
		{ required: true, message: '数据库表名称不能为空', trigger: 'blur' },
		{ min: 3, max: 20, message: '长度在3到20之间', trigger: 'blur' }
	],
	description: [{ required: true, message: '数据库表注释', trigger: 'blur' }]
})
// 是否必选选择框数组
const isRequires = [
	{
		label: '必选项',
		value: true
	},
	{
		label: '非必选项',
		value: false
	}
]
// 表单类型是否展示
const isChangeCascader = ref(true)
// 表单内容
const gridData = [
	{
		key: '禁止覆盖的数据库',
		value: 'sys_user,sys_role,sys_user_role,sys_permission,sys_role_permission。否则会存在异常'
	},
	{
		key: 'SQL命名前缀',
		value: '必须使用sys_,如果需要自定义需要在Constant常量类中自己定义。'
	},
	{
		key: '命名规范',
		value: '不能以关键字进行命名，字段名称按照_命名将会转为驼峰命名。'
	},
	{
		key: '多联表介绍',
		value: '多联表默认的删除逻辑为不更新处理，如果需要其他逻辑请去关联表的删除进行设置。'
	},
	{
		key: '查询介绍',
		value: '当加入查询后，除了关联表的表单类型为下拉选择器，其余的全部都是默认表单，可以去ELmentUI-Plus官网自行设置。'
	}
]
const removeDomain = item => {
	const index = dynamicValidateForm.domains.indexOf(item)
	if (index !== -1) {
		dynamicValidateForm.domains.splice(index, 1)
	}
}

const addDomain = () => {
	dynamicValidateForm.domains.push({
		key: Date.now() + 1,
		key1: Date.now() + 2,
		key2: Date.now() + 3,
		key3: Date.now() + 4,
		key4: Date.now() + 5,
		key5: Date.now() + 6,
		key6: Date.now() + 7,
		key7: Date.now() + 8,
		key8: Date.now() + 9,
		name: null,
		typeAndsize: 'varchar(255)',

		description: null,
		defaultValue: null,
		formComponent: 'input',
		isRequire: true,
		isShow: true,
		isSearch: false,
		relevance: []
	})
}

const submitForm = formEl => {
	if (!formEl) {
		return
	}
	formEl.validate(async valid => {
		if (valid) {
			// console.log(dynamicValidateForm)
			if (dynamicValidateForm.domains.length === 1) {
				ElMessage({
					showClose: true,
					message: '数据库字段长度不符合规范',
					type: 'error'
				})
				return false
			}
			ElMessageBox.confirm('确认已经仔细核对提交生成代码?', '重要提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(async () => {
					await request.post('/generator', dynamicValidateForm)
					ElMessage({
						showClose: true,
						message: '构建成功，请立即重启项目！',
						type: 'success'
					})
					$route.push(`/tools/record`)
				})
				.catch(() => {
					ElMessage({
						showClose: true,
						message: '取消构建！',
						type: 'warning'
					})
				})
		} else {
			console.log('error submit!')
			return false
		}
	})
}

const resetForm = formEl => {
	if (!formEl) {
		return
	}
	formEl.resetFields()
	Object.assign(dynamicValidateForm, {
		domains: [
			{
				key: Date.now(),
				key1: Date.now(),
				key2: Date.now(),
				key3: Date.now(),
				key4: Date.now(),
				key5: Date.now(),
				name: 'id',
				typeAndsize: 'bigint(20)',
				isRequire: true,
				description: '序号',
				defaultValue: null,
				formComponent: 'input',
				isShow: 0
			}
		],
		description: '',
		tableName: ''
	})

	$route.replace(`/tools/generator?id=`)
	// location.reload()
}
</script>

<style lang="scss">
.form-header {
	background-color: #eef1f6;
	color: #606266;
	height: 50px;
	margin-bottom: 10px;

	.el-form-item__content {
		display: flex;
		width: 100%;
		margin-left: 0px !important;
		justify-content: center;
	}

	.el-select,
	.el-cascader,
	.el-input {
		width: 100%;
	}

	span {
		font-size: 15px; /* 设置字体大小 */
		font-weight: bold; /* 设置字体加粗 */
		display: flex;
		width: 100%;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 100%; /* 确保在表格中占满高度 */
		text-align: center; /* 文字居中 */
	}
}

.checkBoxAlign {
	width: 100%;
	text-align: center;
}

.form-content {
	.el-col {
		.el-form-item__content {
			display: flex;
			width: 100%;
			margin-left: 0px !important;
			justify-content: center;
		}

		.el-select,
		.el-cascader,
		.el-input {
			width: 100%;
		}
	}
}
</style>
